import React,{Component} from "react";
import {useSearchParams,useParams} from "react-router-dom"
import LoginHeader from "../Component/LoginHeader";
import Footer from '../Component/Footer'
import {useState} from "react"
import '../css/LoginPage.css'
import LoginFooter from "../Component/LoginFooter";

export default function LoginPage (){
    const params = useParams();
    const name = params.name;
    const id = params.id;
    let [Type,setType] = useState(false);


    return(
        <div> {name} 欢迎来到login-{id}
            <LoginHeader></LoginHeader>
            <div className="center_content">
                <div className="warpper login_conent">
                    <div className="login_from">
                        <div className="fream">
                            <div className="tab_nav">
                                <div id={ Type? "active" : '' } onClick={()=>setType(true)} >扫描登录</div>
                                <div id={ !Type? "active" : ''} onClick={()=>setType(false)} >账户登录</div>
                            </div>
                            <div className="form_conut">
                                <div style={{display:Type ? "block" : 'none'}}>
                                    <dl>二维码登录，暂为官网二维码</dl>
                                    <img src="/image/wx_cz.jpg"></img>
                                </div>
                                <div style={{display:!Type ? "block" : 'none'}}>
                                    <div id="input">
                                        <img src="/image/zh.png"></img>
                                        <input placeholder="邮箱/用户名/手机名"></input>
                                    </div>
                                    <div id="input">
                                        <img src="/image/pw.png"></img>
                                        <input placeholder="请输入密码"></input>
                                    </div>
                                    <div id="check">
                                        <div><input type="checkbox"/>自动登录</div>
                                        <span>忘记密码？</span>
                                    </div>
                                    <button>登陆</button>
                                    <div className="bottom_login">
                                        <span>
                                            <img src="/image/icon1.png"></img>
                                            <img src="/image/icon2.png"></img>
                                            <img src="/image/icon3.png"></img>
                                            <img src="/image/icon4.png"></img>
                                        </span>
                                        <span>
                                            <a href="#">立即注册</a>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/* <Footer></Footer> */}
            <LoginFooter></LoginFooter>
        </div>
    )
}